<template>
	<view class="fullset-page">
		<van-nav-bar :title="title" left-text="返回" left-arrow @click-left="Back" />
		<view class="circle-wrap">
			<view class="dynamic-item" v-for="v in circleList">
				<!-- 作者信息部分 -->
				<view class="dynamic-top">
					<view :id="v.uid">
						<image :src="v.photo" mode="widthFix"></image>
						<text>{{v.nickname}}</text>
					</view>
					<van-button size="small" round icon="plus" plain color="#F92672" @click="onFocus
">关注</van-button>
				</view>

				<!-- 文章标题 -->
				<h3>{{v.bolgTitle}}</h3>
				<!-- 文章照片部分 -->
				<view class="dynamic-imgs" @click="Go_bolginfo(v.bolgId)">
					<image :src="v.imgs" mode="widthFix"></image>
				</view>
				<!-- 时间 点赞  -->
				<view class="dynamic-bottom">
					<!-- 发布时间 -->
					<text>{{v.pubTime}}</text>
					<van-icon name="good-job-o" size="25px" color="#818181" @click="onlike">{{v.like}}</van-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		showToast,
		showSuccessToast
	} from 'vant'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import $api from '../../request/index.js'


	let title = ref('小众圈子')
	let circleList = ref([])

	// 请求数据
	onLoad(payload => {
		console.log(payload.id)
		let url = payload.id ? '/moto/bolg/findByIdBolg?id=' + payload.id : '/moto/bolg'
		title.value = payload.title ? payload.title : '全部圈子'
		$api.get(url).then(res => circleList.value = res.data)
	})

	// 返回按钮
	const Back = () => uni.navigateBack()

	// 跳转详情
	const Go_bolginfo = id => {
		uni.navigateTo({
			url: '/pages/bolg_info/bolg_info' + '?id=' + id,
		})
	}

	// 收藏
	const onFocus = () => {
		uni.showToast({
			icon: 'success',
			title: '关注成功'
		})
	}


	// 点赞
	const onlike = () => {
		showToast({
			message: '给你点个赞',
			icon: 'good-job-o',
		});
	}
</script>

<style>
	.circle-wrap {
		box-sizing: border-box;
		height: calc(100vh - 46px);
		overflow-y: scroll;
		padding: 20rpx;
	}

	.dynamic-wrap {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.dynamic-item {
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.dynamic-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0;
	}

	.dynamic-top>view {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.dynamic-top image {
		width: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.dynamic-imgs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin: 10rpx 0;
	}

	.dynamic-imgs>image {
		width: 100%;
		margin-bottom: 10rpx;
		border-radius: 15rpx;
	}

	.dynamic-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dynamic-bottom>text {
		font-size: 14px;
		color: #808080;
	}
</style>